# 前言

本小节我们开启响应式原理的篇章，在开启这个篇章之前，我们先来了解一下 Vue3 中一个基于 Composition API 响应式应用的例子是如何编写的：

html
复制代码<template>
  <div>
    {{ state.msg }} {{ count }}
  </div>
</template>
<script>
  import { reactive, ref } from 'vue'
  export default {
    setup() {
      const state = reactive({
        msg: 'hello world'
      })

      const count = ref(0)

      const changeMsg = () => {
        state.msg = 'world hello'
      }

      return {
        state,
        count,
        changeMsg,
      }
    }
  }
</script>

此时我们通过 reactive API 或者 ref API 来定义响应式对象。

对于 reactive API 而言，核心是用来定义集合类型的数据，比如：普通对象、数组和 Map、Set。

对于 ref API 而言，可以用来对 string、number、boolean 这些原始类型数据进行响应式定义。

关于二者使用上的更多区别和差异，小伙伴们可以直接参见 Vue 3 官网上《响应式基础》这个章节中的介绍。对于二者的核心实现原理，其实都是依托于 Vue 3 的响应式基础，本小节将以 reactive API 作为切入点，核心分析 Vue 3 的响应式原理。

# Reactive

找到源码中关于 reactive 部分的定义：

export function reactive(target: object) {
  // 不需要对 readonly 的对象进行响应式
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

这个函数核心也就是通过 createReactiveObject 把我们传入的 target 变成响应式的：